<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加课程</title>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-row>
                <el-col :span="18"><div class="grid-content bg-purple">
                    --- 添 加 课 程 ：
                </div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light">
                    <el-button type="primary" @click="classPage">查看课程</el-button>

                    <el-button type="success" @click="quit"> 退 出 登 录</el-button >
                </div></el-col>
            </el-row>
        </el-header>
        <el-container>
            <el-aside width="100px">


            </el-aside>
            <el-main >
                <template>
                    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="课程编号：" prop="courseId">
                            <el-input v-model.number="ruleForm.courseId" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="课程名称：" prop="courseName">
                            <el-input v-model="ruleForm.courseName" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="教师名称：" prop="teacherName">
                            <el-input v-model.number="ruleForm.teacherName"></el-input>
                        </el-form-item>
                        <el-form-item label="学分 (1~6)：" prop="point">
                            <el-input v-model.number="ruleForm.point"></el-input>
                        </el-form-item>
                        <el-form-item label="上课时间：" prop="time">
                            <el-form-item label="第一次课 ：" prop="time1">
                                <el-select v-model="ruleForm.time1_1" placeholder="请选择星期">
                                    <el-option label="星期一" value="1"></el-option>
                                    <el-option label="星期二" value="2"></el-option>
                                    <el-option label="星期三" value="3"></el-option>
                                    <el-option label="星期四" value="4"></el-option>
                                    <el-option label="星期五" value="5"></el-option>
                                </el-select>
                                <el-select v-model="ruleForm.time1_2" placeholder="请选择时间段">
                                    <el-option label="8:05~9:50" value="1"></el-option>
                                    <el-option label="10:15~12:00" value="2"></el-option>
                                    <el-option label="13:35~15:20" value="3"></el-option>
                                    <el-option label="15:45~17:30" value="4"></el-option>
                                    <el-option label="18:30~20:45" value="5"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="第二次课：" prop="time2">
                                <el-select v-model="ruleForm.time2_1" placeholder="请选择星期">
                                    <el-option label="星期一" value="1"></el-option>
                                    <el-option label="星期二" value="2"></el-option>
                                    <el-option label="星期三" value="3"></el-option>
                                    <el-option label="星期四" value="4"></el-option>
                                    <el-option label="星期五" value="5"></el-option>
                                </el-select>
                                <el-select v-model="ruleForm.time2_2" placeholder="请选择时间段">
                                    <el-option label="8:05~9:50" value="1"></el-option>
                                    <el-option label="10:15~12:00" value="2"></el-option>
                                    <el-option label="13:35~15:20" value="3"></el-option>
                                    <el-option label="15:45~17:30" value="4"></el-option>
                                    <el-option label="18:30~20:45" value="5"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form-item>
                        <el-form-item label="上课地点：" prop="location">
                            <el-input v-model="ruleForm.location"></el-input>
                        </el-form-item>
                        <el-form-item label="限制人数：" prop="limited">
                            <el-input v-model.number="ruleForm.limited"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                            <el-button @click="resetForm('ruleForm')">重置</el-button>
                        </el-form-item>
                    </el-form>
                </template>
            </el-main>
        </el-container>
    </el-container>
</div>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script>
    // 选课展示-------------------
    chooseCourse={
        "course_id" : "",
        "course_name" : "",
        "teacher" : "",
        "point" : "",
        "class_time" : "",
        "location" : "",
        "operate" : "",
        "limited" : "",
        "select_number" : "",
    }
    // 用户--------------------
    user = {
        userName:"",
        passWord:"",
        realName:"",
        role:"",
    }
    // 当前用户新增课程
    userCourse = {
        userName : '',
        passWord : '',
        realName : '',
        role : '',
        courseId : '',
        courseName : '',
        teacher : '',
        point : '',
        time1 : '',
        time2 : '',
        location : '',
        limited : '',
    }
    // 获取当前用户
    var url=window.location.search; //获取url中"?"符后的字串
    url = decodeURI(url);
    //接收一个值
    function oneValues(){
        var value;
        var url=window.location.search; //获取url中"?"符后的字串
        if(url.indexOf("?")!=-1){
            value = url.substr(url.indexOf("=")+1);
        }
        return decodeURI(value);
    }
    var result = oneValues();
    user.userName=result;
    axios({
        method: "post",
        // url: "http://localhost:8080/%E5%AD%A6%E7%94%9F%E9%80%89%E8%AF%BE%E7%B3%BB%E7%BB%9F/add_class_Servlet",
        url: "http://1f4c5f22.r6.cpolar.top/%E5%AD%A6%E7%94%9F%E9%80%89%E8%AF%BE%E7%B3%BB%E7%BB%9F/add_class_Servlet",
        data: user
    }).then(function (resp) {
        this.user = resp.data;
    })
    // -------------规范输入-------------
    var checkNumber = (rule, value, callback) => {
        if (!value) {
            return callback(new Error('数据不能为空'));
        }
        setTimeout(() => {
            if (!Number.isInteger(value)) {
                callback(new Error('请输入数字值'));
            }else {
                callback();
            }
        }, 1000);
    };
    var checkString = (rule, value, callback) => {
        if (!value) {
            return callback(new Error('数据不能为空'));
        }
        setTimeout(() => {
            callback();
        }, 1000);
    };
    var checkTime = (rule, value, callback) => {
        if (!value) {
            return callback(new Error('数据不能为空'));
        }
        setTimeout(() => {
                callback();
        }, 1000);
    };
    var checkTeacher = (rule, value, callback) => {
        if (!value) {
            return callback(new Error('数据不能为空'));
        }
        setTimeout(() => {
            console.log("name" + JSON.stringify(user))
            if(value != user.realName){
                return callback(new Error('任课教师不是自己'));
            }else {
                callback();
            }
        }, 1000);
    };
    new Vue({
        el:"#app",
        mounted(){
            //当页面加载完成后，发送异步请求，获取数据
            var _this = this;
                axios({
                    method: "post",
                    // url: "http://localhost:8080/%E5%AD%A6%E7%94%9F%E9%80%89%E8%AF%BE%E7%B3%BB%E7%BB%9F/chooseCourseServlet",
                    url: "http://1f4c5f22.r6.cpolar.top/%E5%AD%A6%E7%94%9F%E9%80%89%E8%AF%BE%E7%B3%BB%E7%BB%9F/chooseCourseServlet",
                    data: user
                }).then(function (resp) {
                    _this.chooseCourses = resp.data;
                })
        },
        methods: {

            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    // 将数据转成course  json
                    if (((this.ruleForm.time1_1 == this.ruleForm.time2_1) && (this.ruleForm.time1_2 == this.ruleForm.time2_2))
                    || ((this.ruleForm.time1_1==''||this.ruleForm.time1_2==''||this.ruleForm.time2_1==''||this.ruleForm.time2_2==''))){
                        alert('课程时间不能相等 或 课程时间不能为空');
                        window.location.href="addClass.html?valus=" + user.userName;
                        return false;
                    }
                    if (valid) {
                        // 绑定数据
                        userCourse.userName = user.userName;
                        userCourse.courseId = this.ruleForm.courseId;
                        userCourse.courseName = this.ruleForm.courseName;
                        userCourse.point = this.ruleForm.point;
                        userCourse.limited = this.ruleForm.limited;
                        userCourse.teacher = this.ruleForm.teacherName;
                        userCourse.location = this.ruleForm.location;
                        userCourse.time1 = this.ruleForm.time1_1 + this.ruleForm.time1_2;
                        userCourse.time2 = this.ruleForm.time2_1 + this.ruleForm.time2_2;
                        // 添加的课程存到数据库
                        axios({
                            method:"post",
                            // url:"http://localhost:8080/%E5%AD%A6%E7%94%9F%E9%80%89%E8%AF%BE%E7%B3%BB%E7%BB%9F/add_course_Servlet",
                            url: "http://1f4c5f22.r6.cpolar.top/%E5%AD%A6%E7%94%9F%E9%80%89%E8%AF%BE%E7%B3%BB%E7%BB%9F/add_course_Servlet",
                            data:userCourse
                        }).then(function (resp) {
                            if(resp.data == "no"){
                                // 课程已存在
                                alert("添加失败，已存在该课程")
                                // 刷新页面
                                window.location.href="addClass.html?valus=" + user.userName;
                            }else if(resp.data == "yes"){
                                alert("添加成功")
                                // 刷新页面
                                window.location.href="addClass.html?valus=" + user.userName;
                            }
                        })
                    } else {
                        alert('课程添加失败!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            classPage(){
                // 跳转到课程网页
                window.location.href="teacher_home.html?valus=" + user.userName;
            },
            quit(){
                // 退出到登录页面
                user.userName = '';
                window.location.href="login.html";
            },

        },
        data() {
            return {
                ruleForm: {
                    courseId : '',
                    courseName : '',
                    teacherName : '',
                    point : '',
                    time1_1 : "",
                    time1_2 : "",
                    time2_1 : "",
                    time2_2 : "",
                    location : "",
                    limited : '',
                },
                rules: {
                    courseName: [
                        { validator: checkString, trigger: 'blur' }
                    ],
                    teacherName: [
                        { validator: checkTeacher, trigger: 'blur' }
                    ],
                    location: [
                        { validator: checkString, trigger: 'blur' }
                    ],
                    courseId: [
                        { validator: checkNumber, trigger: 'blur' }
                    ],
                    point: [
                        { validator: checkNumber, trigger: 'blur' }
                    ],
                    time1_1: [
                        { validator: checkTime, trigger: 'blur' }
                    ],
                    time1_2: [
                        { validator: checkTime, trigger: 'blur' }
                    ],
                    time2_1: [
                        { validator: checkTime, trigger: 'blur' }
                    ],
                    time2_2: [
                        { validator: checkTime, trigger: 'blur' }
                    ],
                    limited: [
                        { validator: checkNumber, trigger: 'blur' }
                    ]
                }
            };
        },
    })
</script>
</body>
</html>